<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style1.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <meta charset=utf-8 />
        <title>Relacion de Grado</title>
    </head>
    <body>

        <div class="contenido">
            <center>
                <div class="contenidoInfo">
                    <div class="contenido">
                        <div class="tabs">
                            <a data-toggle="tab1">Grado Academico</a>
                            <a data-toggle="tab2">Título Profesional</a>
                            <a data-toggle="tab3">Grado Maestro</a>
                        </div>
                        <div class="tabContent">  
                            <div id="tab1">
                                <br/>
                                <center>
                                    <table border="black" cellspacing="0px" >
                                        <thead>
                                            <tr style="background-color: #797979;color: white">
                                                <td>Nro</td>
                                                <td>Apellidos y Nombres</td>
                                                <td>Denominacion Diploma</td>
                                                <td>Fecha Aprobacion C.Fac.</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </center>
                            </div>
                            <div id="tab2">
                                <br/>
                                <center>
                                    <table border="black" cellspacing="0px" >
                                        <thead>
                                            <tr style="background-color: #797979;color: white">
                                                <td>Nro</td>
                                                <td>Apellidos y Nombres</td>
                                                <td>Denominacion Diploma</td>
                                                <td>Fecha Aprobacion C.Fac.</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </center>
                            </div>

                            <div id="tab3">
                                <br/>
                                <center>
                                    <table border="black" cellspacing="0px" >
                                        <thead>
                                            <tr style="background-color: #797979;color: white">
                                                <td>Nro</td>
                                                <td>Apellidos y Nombres</td>
                                                <td>Denominacion Diploma</td>
                                                <td>Fecha Aprobacion C.Fac.</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                            <tr>
                                                <td>1</td>
                                                <td>Calderon Sarmiento, Davis</td>
                                                <td>Grado Academico</td>
                                                <td>12/12/13</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </center>
                            </div>

                        </div>
                        <div style="text-align: right">
                            <input type="button" value="Generar"/><input type="button" value="Cancelar"/>
                        </div>
                    </div>

                </div>

            </center>
        </div>


        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="html5jtabs.js"></script>
        <script>
            $(function() {

                ;
                (function($) {
                    $.fn.html5jTabs = function(options) {
                        return this.each(function(index, value) {
                            var obj = $(this),
                                    objFirst = obj.eq(index),
                                    objNotFirst = obj.not(objFirst);

                            $("#" + objNotFirst.attr("data-toggle")).hide();
                            $(this).eq(index).addClass("active");

                            obj.click(function(evt) {

                                toggler = "#" + obj.attr("data-toggle");
                                togglerRest = $(toggler).parent().find("div");

                                togglerRest.hide().removeClass("active");
                                $(toggler).show().addClass("active");

                                $(this).parent("div").find("a").removeClass("active");
                                $(this).addClass("active");
                                return false;
                            });
                        });
                    };
                }(jQuery));

                $(function() {
                    $(".tabs a").html5jTabs();
                });
            });
        </script>
    </body>
</html>